


$(function(){
	let paint = $("#paintArea")[0];
	repaintCanvas(paint.scrollHeight, paint.scrollWidth, true);
	$("#contentInput").css({'height':paint.scrollHeight, 'width':paint.scrollWidth});


	$("#fontcolorSetting").colorpicker({
		alpha:false,
		close:fontColorEventListener
	});

	$("#strokecolorSetting").colorpicker({
		alpha:false,
		close:strokeColorEventListener
	});

	hideText();
	$("#paintLabel").click(()=>{
		toggleTool(paintOrText);
		if(paintOrText)
		{
			hidePaint();
			paintOrText = false;
			showText();
		}
		else
		{
			showPaint();
			paintOrText = true;
			hideText();
		}

	});

	$("#textLabel").click(()=>{
		toggleTool(paintOrText);
		if(!paintOrText)
		{
			hideText();
			paintOrText = true;
			showPaint();
		}
		else
		{
			showText();
			paintOrText = false;
			hidePaint();
		}
		
	});


	$('#minimizeShadow span:eq(0)').click(()=>ipcRenderer.send('minimize-shadow'));

	$("#historyBtn").click(()=>$("#historyDetail").modal({'backdrop':'static'}));
	$("#historyClose").click(()=>$("#historyDetail").modal('hide'));

	$("#shareBtn span").click(()=>$("#shareDetail").modal());
	$("#shareClose").click(()=>$("#shareDetail").modal('hide'));

});

function hidePaint()
{
	$("#paintPanel span").slideUp();
	$("#strokecolorSetting").slideUp();
	$("#paintPanel").animate({height: '36px'});
}

function showPaint()
{
	$("#paintPanel span").slideDown();
	$("#strokecolorSetting").slideDown();
	$("#paintPanel").animate({height: '360px'});
}

function hideText()
{
	$("#textPanel span").slideUp();
	$("#textPanel select").slideUp();
	$("#textPanel input").slideUp();
	$("#textPanel").animate({height: '36px'});
}

function showText()
{
	$("#textPanel span").slideDown();
	$("#textPanel select").slideDown();
	$("#textPanel input").slideDown();
	$("#textPanel").animate({height: '360px'});
}

function fontColorEventListener(e)
{

  // 1. set brash context
  //var color= "#"+$(this).val();
	 // ctx.strokeStyle =color;
  $("#fontcolorSetting").css({'background': '#' + $(this).val()});
  // 2. set tips info
	 // lineTip.css({"border-color":color});
	  //rectTip.css({"border-color":color});
	  //fontTip.css({"border-color":color});
}

function strokeColorEventListener(e)
{

  // 1. set brash context
  //var color= "#"+$(this).val();
	 // ctx.strokeStyle =color;
  $("#strokecolorSetting").css({'background': '#' + $(this).val()});
  // 2. set tips info
	 // lineTip.css({"border-color":color});
	  //rectTip.css({"border-color":color});
	  //fontTip.css({"border-color":color});
}



